<template>
    <div class="message">
        <h1>{{mess}}</h1>
        <va-button-group color="black">
            <va-button @click="show(1)">通知</va-button>
            <va-button @click="show(2)">粉丝</va-button>
            <va-button @click="show(3)">喜欢</va-button>
        </va-button-group>
        <div  style="animation:zoomIn;animation-duration: 1s">
            <mess v-if="show1" :mess="messages" :more="more" :photo="photo"></mess>
        </div>
        <div v-if="show2" style="animation: slideInUp; animation-duration:0.5s;">
            <mess  :mess="messages2" :more="more" :photo="photo"></mess>
        </div>
        <div v-if="show3" style="animation: slideInUp; animation-duration:0.5s;">
            <mess  :mess="messages3" :more="more" :photo="photo"></mess>
        </div>
    </div>
</template>
<script>
import mess from '../../components/Message.vue'
import {reactive,toRefs} from 'vue'
export default{
    components:{
        mess
    },
    setup(){
        const other2=require('../../assets/other2.png')
        const other3=require('../../assets/other3.png')
        const other4=require('../../assets/other4.png')
        const other5=require('../../assets/other5.png')
        const state=reactive({
            messages: [
                { name: '太酷不给撩',message: 'Hi~ 你的摄影好赞呀!!', img: 'https://randomuser.me/api/portraits/women/5.jpg',time:'1分钟前' },
                { name: '魅力本人', message: '你的摄影真不错', img: 'https://randomuser.me/api/portraits/men/1.jpg',time:'01:56'  },
                { name: '野猫梁上走', message: 'Hi~ 可以加个好友吗', img: 'https://randomuser.me/api/portraits/men/3.jpg',time:'12:20'  },
                { name: '傲气稳了全场', message: '求分享摄影技术~', img: 'https://randomuser.me/api/portraits/men/5.jpg',time:'04-17'  },
            ],
            messages2:[
                { name: '皮球先生',message: '关注了你', img: 'https://randomuser.me/api/portraits/women/5.jpg',time:'04/21 04:09' },
                { name: '魅力本人', message: '关注了你', img: 'https://randomuser.me/api/portraits/men/1.jpg',time:'04/20 23:11' },
                { name: '被通缉的人', message: '关注了你', img: 'https://randomuser.me/api/portraits/men/3.jpg',time:'04/21 12:09' },
                { name: '傲气稳了全场', message: '关注了你', img: 'https://randomuser.me/api/portraits/men/5.jpg',time:'04/21 08:13' },

            ],
            messages3:[
                { name: '皮球先生',message: '04/21 04:15 | 点赞了你的作品', img: 'https://randomuser.me/api/portraits/women/5.jpg',time:other2 },
                { name: '魅力本人', message: '04/21 04:15 | 下载了你的作品', img: 'https://randomuser.me/api/portraits/men/1.jpg',time:other3 },
                { name: '被通缉的人', message: '04/21 04:15 | 下载了你的作品', img: 'https://randomuser.me/api/portraits/men/3.jpg',time:other4 },
                { name: '傲气稳了全场', message: '04/21 04:15 | 点赞了你的作品', img: 'https://randomuser.me/api/portraits/men/5.jpg',time:other5 },
            ],
            more:'全部私信',
            photo:false,
            mess:"消息通知",
            show1:true,
            show2:false,
            show3:false
        })
        const show=(index)=>{
            if(index==1){
                state.photo=false;
                state.mess="消息通知";
                state.show1=true;
                state.show2=false;
                state.show3=false;
                state.more="全部私信"
            }
            else if(index==2) {
                state.photo=false
                state.mess="关注我的"
                state.show1=false;
                state.show2=true;
                state.show3=false;
                state.more=""
            }
            else if(index==3){
                state.photo=true
                state.mess="喜欢我的"
                state.show1=false;
                state.show2=false;
                state.show3=true;
                state.more=""
            }
        }
        return {...toRefs(state),show,
            other2,other3,other4,other5};
    }
}
</script>

<style scoped>
.message{
    width: 375px;
    height: 510px;
}
h1{
    float: left;
    font-size: 18px;
    margin-top: 25px;
    margin-left: 25px;
    margin-bottom: 20px;
}
.va-button-group{
    margin:0 auto;
}

</style>